<template>
  <div class="custView">
    <div style="text-align:right;margin-bottom:10px">
        <el-button type="primary" @click="returnPage">返回</el-button>
    </div>
    <more-panel mode="1" title="身份证信息">
      <el-col :span="4" slot="fixed">
          <div class="block" style="text-align:center;">
            <el-image v-if="!src" fit="scale-down" :src="require('@/assets/imgs/wjz.jpg')"  class="img">                                                 
            </el-image>
            <el-image v-else fit="scale-down" :src="src"  class="img">                                                
            </el-image>
          </div>
      </el-col>
      <el-col :span="20" slot="fixed"
        ><div class="grid-content bg-purple">
          <div>
            <h3 class="u-title">
              {{partName}}
            </h3>
            <el-row :gutter="6">
              <el-col
                class="flexCol"
                :span="8"
                v-for="(item, index) in dataArr[0]"
                :key="index"
              >
                <el-col :span="8" class="u-name">{{ item.name }}：</el-col>
                <el-col :span="12" class="u-value">{{ item.value }}
                 <span
                    v-if="item.flag && item.sysUser && item.value != ''"
                    class="u-btn"
                  >
                    <template>
                      <el-button
                        type="text"
                        @click="partyNumberInfoToView(item.flag, index)"
                        size="mini"
                        class="u-toView-btn"
                      >
                        查看
                      </el-button>
                    </template>
                  </span>
                </el-col>
              </el-col>
            </el-row>
          </div>
        </div></el-col
      >
      <el-col :span="20" :offset="4">
        <el-row :gutter="6">
          <el-col :span="8" v-for="(item, index) in dataArr[1]" :key="index">
            <el-col :span="8" class="u-name">{{ item.name }}：</el-col>
            <el-col :span="12" class="u-value">{{ item.value }}</el-col>
          </el-col>
        </el-row>
      </el-col>
      <el-col :span="20" :offset="4">
          <el-row :gutter="6">
            <el-col :span="16" v-for="(item, index) in dataArr[2]" :key="index">
              <el-col :span="4" class="u-name">{{ item.name }}：</el-col>
              <el-col :span="20" class="u-value">{{ item.value }}</el-col>
            </el-col>
          </el-row>
        </el-col>
    </more-panel>
    <!-- <el-row class="m-box">
      <el-col :span="12">
        <i class="el-icon-s-data yellow"></i>营销责任地:<span>集团</span>
      </el-col>
      <el-col :span="12">
        <i class="el-icon-s-data  yellow"></i>客户经理:<span>系统管理员</span>
      </el-col>
    </el-row> -->
    <!-- 选项卡 -->
    <div class="m-tabs-box">
      <el-tabs
        v-model="activeName"
        @tab-click="handleClick"
        :tab-position="tabPosition"
      >
        <el-tab-pane label="基本信息" name="baseInfo">
          <cust-base-info ref="CustBaseInfo" :partyCertId="partyCertId"></cust-base-info>
        </el-tab-pane>
        <el-tab-pane label="业务信息" name="businessInfo">
          <business-info></business-info>
        </el-tab-pane>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import MorePanel from "@/components/public/MorePanel/MorePanelCust";
import CustBaseInfo from "@/views/customer/customer-child/CustBaseInfo";
import BusinessInfo from "@/views/customer/custView/BusinessInfor"
import CustomerInfoManageServer from "@/api/customer/CustomerInfoManageServer";
import { mapState } from "vuex";
export default {
  name: "CustView",
  data() {
    return {
      src:
        // "https://cube.elemecdn.com/6/94/4d3ea53c084bad6931a56d5158a48jpeg.jpeg",
        "",
      dataArr: [
        [
          { name: "统一社会信用代码", value: "",flag: "1",sysUser:false},
          { name: "证件类型", value: "" },
          { name: "证件号码", value: "",flag: "2",sysUser:false },
          { name: "身份证类型", value: "" },
          { name: "身份证编码", value: "" },
          { name: "身份证有效期", value: "" },
          { name: "客户简称", value: "" },
          { name: "机构类型", value: "" },
          { name: "行业类型", value: "" },
          { name: "登记管理部门名称", value: "" },
          { name: "经济类型", value: "" },
          { name: "法定代表人姓名", value: "" },
        ],
        [
          { name: "注册资本", value: "" },
          { name: "成立日期", value: "" },
          { name: "发照日期", value: "" },
          { name: "经营状态", value: "" },
          { name: "发证机关", value: "" },
          { name: "生产经营地址", value: "" },
          { name: "注册地址", value: "" },
        ],
        [
          {
            name: "经营范围",
            value: "",
            flag: "0",
          },
        ],
      ],
      activeName: "baseInfo",
      tabPosition: "left",
      partName:'重点客户测试',
      partyCertId:''
    };
  },
  components: {
    MorePanel,
    CustBaseInfo,
    BusinessInfo
  },
  created() {},
  mounted() {
      //初始化身份证信息
      this.initGetPartyNews();
      this.getDesensPriv();//校验权限
      // this.getPhoto();
  },
  computed: {
    ...mapState("user", ["user"]),
  },
  methods: {
    handleClick(tab, event) {
      
      
    },
    //判断是否有权限
    async getDesensPriv(){
      const result = await CustomerInfoManageServer.getDesensPriv({sysUserId:this.user.sysUserId})
      if(result.code == 200){
         if(result.meta.NUM_COUNT != 0){
           this.dataArr[0][0].sysUser = true;
           this.dataArr[0][2].sysUser = true;
         }
      }
    },
    //点击查看按钮
    async partyNumberInfoToView(item, index) {
      let parmas;
      if(item == 1){
          parmas = {
           flag:'orgUscc',
           custId:this.$route.query.custId,
           partyCertId:this.partyCertId,
           partyId:this.$route.query.partyId,
           staffName:this.user.staffName,
           staffCode:this.user.staffCode,
         }  
      }else {
         parmas = {
           flag:'certNum',
           custId:this.$route.query.custId,
           partyCertId:this.partyCertId,
           partyId:this.$route.query.partyId,
           staffName:this.user.staffName,
           staffCode:this.user.staffCode,
         } 
      }
      const response = await CustomerInfoManageServer.getDesensAttr(parmas);
      if(response.code == 200){
        if(item == 1){
            this.dataArr[0][0].value = response.meta.resultValue;
            this.dataArr[0][0].sysUser = false;
        }else {
            this.dataArr[0][2].value = response.meta.resultValue;
            this.dataArr[0][2].sysUser = false;
        }
      }
    },
    //初始化身份证信息
    async initGetPartyNews() {
      let params = {
        partyId: this.$route.query.partyId,
        staffId: this.$route.query.staffId,
        desenFlag:1
      };
      
      const response = await CustomerInfoManageServer.initGetPartyNews(params);
      if (response.code == 200) {
        let result = response.meta;
        this.partyCertId = this.isNull(result.party.partyCert.partyCertId);
        this.getPhoto(result.party.partyCert.photoPath)
        this.$refs.CustBaseInfo.initGetCustCommon(result)
        //客户名称
        this.partName = this.isNull(result.party.partyName)
        // 统一社会信用代码
        this.dataArr[0][0].value = this.isNull(result.party.partyCert.orgUscc);
        // 证件类型
        this.dataArr[0][1].value = this.isNull(result.party.partyCert.certTypeName);
        //  证件号码
        this.dataArr[0][2].value = this.isNull(result.party.partyCert.certNum);
        // 身份证类型
        this.dataArr[0][3].value = this.isNull(result.party.identityTypeName);
        // 身份证编码
        this.dataArr[0][4].value = this.isNull(result.party.partyNbr);
        // 身份证有效期
        this.dataArr[0][5].value = this.format(this.isNull(result.party.idExpDate));
        // 客户简称
        this.dataArr[0][6].value = this.isNull(result.party.partyAbbrname);
        // 机构类型
        this.dataArr[0][7].value = this.isNull(result.party.partyOrg.orgPropertyName);
        // 行业类型
        this.dataArr[0][8].value = this.isNull(
          result.party.partyOrg.industryName
        );
        // 登记管理部门名称
        this.dataArr[0][9].value = this.isNull(
          result.party.partyOrg.registerOrg
        );
        // 经济类型
        this.dataArr[0][10].value = this.isNull(
          result.party.partyOrg.econTypeName
        );
        //法定代表人姓名
        this.dataArr[0][11].value = this.isNull(
          result.party.partyOrg.legalRepr
        );
        //注册资本
        this.dataArr[1][0].value = this.isNull(result.party.partyOrg.orgAssets);
        //成立日期
        this.dataArr[1][1].value = this.format(this.isNull(
          result.party.partyOrg.custBuildDate
        ));
        //发照日期
        this.dataArr[1][2].value = this.format(this.isNull(result.party.partyCert.issuedate));
        //经营状态
        this.dataArr[1][3].value = this.isNull(result.party.partyOrg.busiStatusCdName);
        //发证机关
        this.dataArr[1][4].value = this.isNull(result.party.partyOrg.certorg);
        //生产经营地址
        this.dataArr[1][5].value = this.isNull(result.party.partyOrg.orgAddr);
        //注册地址生产经营地址
        this.dataArr[1][6].value = this.isNull(
          result.party.partyOrg.registerAddr
        );
        //经营范围
        this.dataArr[2][0].value = this.isNull(
          result.party.partyOrg.busiScope
        );
      }
    },
    //获取证件照片
    async getPhoto(path){
      if(path){
        const response = await CustomerInfoManageServer.getCustPhoto({photoPath:path});
        if(response.code == 200){
           this.src = response.meta.base64
        }
      }else {
        this.src = ''
      }
    },
    // 判断值是否存在
    isNull(val) {
      if (val == "NaN" || val == "null" || val == "undefined" || val == undefined) {
        return (val = "");
      }else {
        return val
      }
    },
    format(val){
      if(val) {
        // var time = new Date(parseInt(val));
        // var y = time.getFullYear();
        // var m = time.getMonth()+1;
        // var d = time.getDate();
        var y = val.substring(0,4);
        var m = val.substring(4,6)
        var d = val.substring(6,8)
        // return y+'-'+this.add0(m)+'-'+this.add0(d);
        return y + '-' + m + '-' + d
      }else {
        return val
      }
    },
    returnPage(){
      this.$router.push({
        path: "/custbaseinf",
        query: {
        },
      });
    }

  },
};
</script>
<style lang="scss" scoped>
.m-tabs-box {
  margin-top: 20px;
}
.yellow {
  color: #f56f3c;
  margin-right: 5px;
}
.ne-title {
  line-height: 50px;
}
.custView {
  padding: 10px 20px;
  background-color: #fff;
}
.form-block {
  margin-top: 0 !important;
}
.m-title {
  margin-top: 0.2rem;
  margin-bottom: 0.1rem;
  color: #0052d9;
  font-size: 0.12rem;
}
.flexCol{
  display: flex;
  height: 40px;
  align-items: center;
}
.m-box {
  background-color: rgba(221, 221, 221, 0.2);
  padding: 0.13rem;
  margin-top: 0.2rem;
  text-align: center;
  font-size: 0.14rem;
}
.m-title .icon {
  float: left;
  display: block;
  width: 0.04rem;
  height: 0.12rem;
  background: #f56f3c;
  margin-top: 0.02rem;
  margin-right: 0.1rem;
  font-size: 0.14rem;
}
.img {
  width: 100%;
  height: 2.2rem;
}
// ::v-deep .image-slot {
//     display: flex !important;
//     justify-content: center !important;
//     align-items: center !important;
//     width: 100% !important;
//     height: 100% !important;
//     background: #f5f7fa !important;
//     color: #909399 !important;
// }
// .image-slot .el-icon-picture-outline {
//   font-size: 28px;
// }
.u-name {
  text-align: right;
  font-size: 0.14rem;
  padding: 0.1rem 0;
  color: #999;
}
.u-value {
  text-align: left;
  font-size: 0.14rem;
  padding: 0.1rem 0;
  color: #333;
}
.contain {
  background: #fff;
  color: #333;
}
.u-title {
  font-size: 0.18rem;
  color: #333;
  margin-left: 0.3rem;
  margin-bottom: 0.2rem;
  font-weight: 600;
}
</style>
